<template>
  <div>
  <!-- 排序组件 -->
  <van-dropdown-menu>
  <van-dropdown-item v-model="value1" :options="option1" title="全部"/>
  <van-dropdown-item v-model="value2" :options="option2" title="价格" @change="changeprice"/>
  <van-dropdown-item v-model="value3" :options="filterCategory" title="分类" @change="changefenlei"/>
  </van-dropdown-menu>
  <!-- 没有商品显示的组件 -->
  <van-empty image="search" description="没有找到该商品" v-if="goodsList.length == 0"/>
  <!-- 找到商品显示的组件 -->
  <shangpin v-else :goodsList='goodsList'></shangpin>
  </div>
</template>

<script>
import shangpin from '../searchpage/shangpin.vue';
  export default {
  components: { shangpin },
    name:'',
    data () {
     return {
      value1: "",
      value2: "desc",
      option1: [],
      option2: [
        { text: "价格由高到低", value: "desc" },
        { text: "价格由低到高", value: "asc" },
      ],
      };
    },
    methods:{
        //子传父将选中的下拉菜单传给父组件
       changeprice(val){
           this.$emit("changeprice",val)
       },
       changefenlei(val){
           this.$emit("changefenlei",val)
       }
    },
    props:['goodsList','filterCategory'],
     //通过计算属性，获取到选中的分类
    computed:{
        value3:{
            get(){
                let val =''
                this.filterCategory.forEach((item)=>{
                      if(item.checked){
                          val=item.value
                      }
                })
                return val
            },
            set(val){

            }
        }
    }
    
 
  }

</script>
<style scoped>

</style>